<!--
 * @Author: windys
 * @Description: 表格
 * @Date: 2021-12-06 16:29:50
-->
<template>
    <div class="page" style="overflow: hidden; width: 100%; height: 100%;">
        <m-table
            ref="mTable"
            :tableData="tableConfig.tableData"
            :tableColumn="tableConfig.tableColumn"
            :childrenColumn="tableConfig.childrenColumn"
            :buttons="tableConfig.buttons"
            :handles="tableConfig.handles"
            :validRules="tableConfig.validRules"
            :showSeq="true"
            :operaWidth="300"
            @handleClickName="handleClickName"
            @handleSaerch="handleSaerch"
        >
            <template #filterHade>
                <a-form-item label="标题">
                    <a-input type="text" v-model:value="params.name"></a-input>
                </a-form-item>
                <a-form-item label="标题">
                    <a-input type="text" v-model:value="params.mobile"></a-input>
                </a-form-item>
                <a-form-item label="标题">
                    <a-input type="text" v-model:value="params.age"></a-input>
                </a-form-item>
            </template>
            <!-- <template #tableHandle="{ row }">
                <vxe-button
                    status="primary"
                    @click="handleEdit(row)"
                    v-show="!$refs.mTable.xTable.isActiveByRow(row.row)"
                >编辑</vxe-button>
            </template>-->
        </m-table>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, nextTick, reactive } from 'vue'
import { VXETable } from 'vxe-table'
import mTable from '../../../components/table/MTable.vue'
export default defineComponent({
    components: {
        mTable
    },
    methods: {

    },
    setup() {
        const params = reactive({
            name: '',
            age: "",
            mobile: ""
        })


        const mTable = ref()
        const handleClickName = (name: any, row: any, seq: any) => {
            console.log(typeof name)
            if (typeof name === 'function') {
                name(row, seq)
            } else {
                if (name && name == 'Sex') {
                    console.log('点击性别列', row)
                }
            }

        }
        // 编辑
        const handleEdit = (row: any) => {
            console.log(row, '编辑')
            const $table = mTable.value.xTable
            $table.setActiveRow(row)
        }
        // 保存
        const handleSave = async (row: any) => {
            console.log(row, '保存')
            const $table = mTable.value.xTable
            const errMap = await $table.validate(true)
            if (errMap) {
                VXETable.modal.message({ status: 'error', content: '校验不通过！' })
            } else {
                $table.clearActived()
            }
        }
        // 取消
        const handleCancel = (row: any) => {
            console.log(row.row, '取消')
            const $table = mTable.value.xTable
            $table.clearActived().then(() => {
                // 还原行数据
                $table.revertData(row)
            })
        }
        // 插入
        const handleInsert = async (row: any, seq: any) => {

            console.log(row, '插入')
            const $table = mTable.value.xTable
            const errMap = await $table.validate(true)
            if (errMap) {
                VXETable.modal.message({ status: 'error', content: '校验不通过！' })
                return
            } else {
                $table.clearActived()
            }
            const record = {
                name: '',
                nickname: row.nickname,
                sex: row.sex,
                role: row.role,
                address: row.address,
                age: row.age
            }
            const { row: newRow } = await $table.insertAt(record, row)
            await $table.setActiveCell(newRow, 'name')
        }
        const handleName1 = () => {
            console.log('按钮一事件')
            const $table = mTable.value
            console.log($table, '$table$table')
            $table.exportDataEvent()
        }
        const handleName2 = () => {
            console.log('按钮一事件')
        }
        const handleSaveAddEditRow = () => {
            const $table = mTable.value.xTable
            const { insertRecords, removeRecords, updateRecords } = $table.getRecordset()
            console.log(insertRecords, removeRecords, updateRecords)
        }
        //
        // 查询
        const handleSaerch = ()=>{
            console.log(params)
        }
        return {
            handleSaerch,
            params,
            mTable,
            handleClickName,
            tableConfig: {
                // 工具按钮
                buttons: [
                    {
                        title: '导出xlsx',
                        type: 'primary',
                        handleName: handleName1
                    },
                    {
                        title: '按钮二',
                        type: 'primary',
                        handleName: handleName2
                    },
                    {
                        title: '保存新增的数据',
                        type: 'success',
                        handleName: handleSaveAddEditRow
                    },

                ],
                // 操作按钮
                handles: [
                    {
                        title: '编辑',
                        status: 'success',
                        handleName: handleEdit,
                        show: (row: any) => !mTable.value.xTable.isActiveByRow(row)
                    },
                    {
                        title: '保存',
                        status: 'primary',
                        handleName: handleSave,
                        show: (row: any) => mTable.value.xTable.isActiveByRow(row)
                    },
                    {
                        title: '取消',
                        status: 'info',
                        handleName: handleCancel,
                        show: (row: any) => mTable.value.xTable.isActiveByRow(row)
                    },
                    {
                        title: '新增',
                        status: 'danger',
                        handleName: handleInsert,
                        show: (row: any) => !mTable.value.xTable.isActiveByRow(row)
                    }
                ],
                tableColumn: [
                    { key: 3, field: 'name', title: '姓名', width: 200, fixed: 'left', sortable: true, solt: 'edit', editRender: {}, editType: 'input', copy: true, },
                    { key: 4, field: 'nickname', title: '昵称', width: 200, fixed: 'left', solt: 'edit', editRender: {}, editType: 'input', copy: true, },
                    { key: 1, field: 'age', title: '年龄', width: 200, copy: true, },
                    {
                        key: 5, field: 'sex', title: 'Sex', width: 200, filters: [{ value: '1', label: '男' }], formatter: "formatSex",
                        solt: 'edit', editRender: {}, editType: 'select', copy: true,
                        editSelectOptions: [
                            { value: '1', label: '男' },
                            { value: '2', label: '女' },
                        ]
                    },
                    { key: 6, field: 'role', title: '角色', copy: true, },
                    { key: 7, field: 'address', title: '地址', type: 'html', copy: true, },
                    { key: 8, field: 'expand', title: '展开行', type: 'expand', copy: true, }

                ],
                // 展开行字段配置
                childrenColumn: [
                    { key: 1, field: 'a1', title: '字段一', },
                    { key: 2, field: 'a2', title: '字段二', },
                    { key: 3, field: 'a3', title: '字段三', },
                    { key: 4, field: 'a4', title: '字段四', },
                ],
                //表格编辑参数校验 
                validRules: {
                    name: [
                        { required: true, message: '请输入姓名' },
                        {
                            validator(cellValue: any) {
                                // 模拟服务端校验
                                return new Promise<void>((resolve, reject) => {
                                    setTimeout(() => {
                                        if (cellValue && (cellValue.length < 3 || cellValue.length > 50)) {
                                            reject(new Error('名称长度在 3 到 50 个字符之间'))
                                        } else {
                                            resolve()
                                        }
                                    }, 100)
                                })
                            }
                        }
                    ]
                },
                tableData: [
                    {
                        id: 10001, name: 'Test1', role: 'Develop', sex: '1', age: 28, address: 'test abc', nickname: '123', children: [],
                    },
                    { id: 10006, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: '<h2 style="color:red">标签内容2</h2>', children: [] },
                    {
                        id: 10009, name: 'Test5', role: 'Designer', sex: '0', age: 23,
                        address: '<h2>标签内容</h2>', children: []
                    },
                    { id: 10010, name: 'Test6', role: 'Designer', sex: '1', age: 23, address: '<h2 style="color:red">标签内容2</h2>', children: [] },
                    {
                        id: 10011, name: 'Test7', role: '角色', sex: '1', age: 23, address: '<h2 style="color:red">标签内容2</h2>', expand: '可以展开', children: [
                            { a1: 'a1', a2: 'a2', a3: 'a3', a4: 'a4' },
                            { a1: 'a1', a2: 'a2', a3: 'a3', a4: 'a4' },
                            { a1: 'a1', a2: 'a2', a3: 'a3', a4: 'a4' },
                            { a1: 'a1', a2: 'a2', a3: 'a3', a4: 'a4' },
                        ]
                    },
                ]
            }

        }
    },
})
</script>



<style lang="scss" scoped>
</style>